<template>
  <div>
    <el-form :inline="true" :model="queryForm" class="user-search">
      <el-form-item label="用户名">
        <el-input size="small" v-model="queryForm.usrName" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" style="width: 70px;" @click="handelList()">查询</el-button>
      </el-form-item>
       <el-form-item>
        <el-button size="small" style="width: 70px;" type="success"  @click="dialogFormVisible = true">新增</el-button>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="danger">批量删除</el-button>
      </el-form-item> 
    </el-form>

    <el-table border ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" style="color: lightseagreen;">
      </el-table-column>
      <el-table-column prop="usrId" label="ID" width="120" align="center">
      </el-table-column>
      <el-table-column prop="usrName" label="用户名" width="120" align="center">
      </el-table-column>
      <el-table-column prop="usrYx" label="邮箱" show-overflow-tooltip align="center">
      </el-table-column>
      <el-table-column prop="usrPhone" label="手机号" show-overflow-tooltip align="center">
      </el-table-column>
      <el-table-column prop="usrFlag" label="状态" show-overflow-tooltip align="center">
		  <template slot-scope="scope">
		   <el-button v-if="scope.row.usrFlag == 1"  size="mini"  type="primary" plain>正常</el-button>
			<el-button v-else size="mini" type="danger" plain>禁用</el-button>
		</template>
      </el-table-column>
      <el-table-column prop="usrDate" label="创建时间" :formatter="fmt" show-overflow-tooltip align="center">
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button @click="handelEdit(scope.$index, scope.row)" type="warning" size="mini">修改</el-button>
          <el-button @click="handelDelete(scope.$index, scope.row)" type="danger" size="mini">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
	<div style="text-align: center;margin-top: 20px;">
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryForm.page"
		 :page-sizes="[5, 10, 20, 50]" :page-size="queryForm.rows" layout="total, sizes, prev, pager, next, jumper" :total="queryForm.total">
		</el-pagination>
	</div>
	
	
	<el-dialog title="新增" :visible.sync="dialogFormVisible">
	  <el-form :model="form" label-width="80px" size="mini">
	    <el-form-item label="用户名:" :label-width="formLabelWidth">
	      <el-input v-model="form.usrName" autocomplete="off"></el-input>
	    </el-form-item>
		<br />
		<el-form-item label="密码:" :label-width="formLabelWidth">
		  <el-input v-model="form.usrPassword" autocomplete="off"></el-input>
		</el-form-item><br />
		<el-form-item label="确认密码:" :label-width="formLabelWidth">
		  <el-input v-model="form.usrPassword2" autocomplete="off"></el-input>
		</el-form-item><br />
		<el-form-item label="邮箱:" :label-width="formLabelWidth">
		  <el-input v-model="form.usrYx" autocomplete="off"></el-input>
		</el-form-item><br />
		<el-form-item label="手机号:" :label-width="formLabelWidth">
		  <el-input v-model="form.usrPhone" autocomplete="off"></el-input>
		</el-form-item><br />
		<el-form-item label="角色" prop="checkedRoles">
		        <el-checkbox-group v-model="ruleForm.checkedRoles" @change="handleCheckedValue">
		          <el-checkbox v-for="role in roles" :label="role" :key="role"> {{ role }} </el-checkbox>
		        </el-checkbox-group>
		      </el-form-item>
			  
	  </el-form>
	  <div slot="footer" class="dialog-footer">
	    <el-button @click="dialogFormVisible = false">取 消</el-button>
	    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
	  </div>
	</el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'userplay',
    data() {
      return {
        ts: new Date().getTime(),
        tableData: [],
        multipleSelection: [],
        queryForm: {
          usrName: null,
			page: 1,
			rows: 5,
			total: 0
        },
		dialogFormVisible: false,
		form: {
		          usrName: '',
		          usrPassword: '',
		          usrPassword2: '',
		          usrYx: '',
		          usrPhone: false,
		          roleId: '',
				  usrFlag:''
		        },
				formLabelWidth: '75px'
      } //return结束
    }, //data结束
    methods: {
		handleSizeChange(rows) {
			//每页显示改变
			this.queryForm.page = 1
			this.queryForm.rows = rows
			this.doListAllAdmin();
		},
		handleCurrentChange(page) {
			//指定页码跳转
			this.queryForm.page = page
			this.doListAllAdmin();
		},
		
      toggleSelection: function(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange: function(val) {
        this.multipleSelection = val;
      },
	  
      //查询所有的管理员
      doListAllAdmin: function() {
        let url = this.axios.urls.SYS_SYSUSER_LISTALLADMIN
        this.axios.post(url, this.queryForm).then((response) => {
          this.tableData = response.data.result
		  this.queryForm.page = response.data.page
		  this.queryForm.rows = response.data.rows
		  this.queryForm.total = response.data.total
          console.log('商家管理员数据', response.data.result)
        })
      },
      //跳转至新增页面
      // toAddAdmin: function() {
      //   this.$router.push('/Main/AddAdmin')
      // },
      //删除管理员
      // handelDelete: function(index, row) {
      //   console.log('管理员ID：', row.userId)
      //   this.$confirm('是否确认删除该管理员?', '提示', {
      //     confirmButtonText: '确定',
      //     cancelButtonText: '取消',
      //     type: 'warning'
      //   }).then(() => {
      //     this.axios.post(this.axios.urls.SYS_SYSUSER_DELADMIN, {
      //       userId: row.userId
      //     }).then((response) => {
      //       this.$message({
      //         message: '管理员删除成功',
      //         type: 'success'
      //       })
      //       this.doListAllAdmin()
      //     })
      //   }).catch(() => {
      //     this.$message({
      //       type: 'info',
      //       message: '已取消删除'
      //     })
      //   })
      // },

      // //编辑管理员
      // handelEdit: function(index, row) {
      //   console.log('管理员ID：', row.userId)
      //   this.$router.push({
      //     path: '/main/EditAdmin',
      //     query: {
      //       userId: row.userId
      //     }
      //   })
      // },

      //模糊查询管理员
      handelList: function() {
        this.doListAllAdmin()
      },

      //date格式时间转换函数
      // fmt: function(row, column) {
      //   const date = new Date(row[column.property])
      //   var Y = date.getFullYear() + '-'
      //   var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      //   var D = date.getDate() + '  '
      //   var h = date.getHours() + ':'
      //   var m = date.getMinutes() + ':'
      //   var s = date.getSeconds()
      //   return Y + M + D + h + m + s
      // }
    }, //methods结束

    //页面创建之后调用查询所有管理员方法
    created: function() {
      this.doListAllAdmin()
    }

  } //export导出结束
</script>

<style>
</style>
